<template>
  <a-spin size="large" :spinning="spinning" tip="加载中...">
    <CommonHeadQueryComponent
      ref="acceptHandleHeadRef"
      :needMoreQuery="true"
      @myEvent="myEvent"
      @onSearch="onSearch"
      @onReset="reQuery"
    >
      <div slot="headLeft" style="display: flex; align-items: center; margin-left: 40px">
        <a-input
          size="large"
          v-model="postCode"
          placeholder="请输入邮递单号"
          class="accept_main_content_operate_left_search_customer"
        >
          <a-icon
            slot="addonAfter"
            class="cursor_pointer accept_main_content_operate_left_search_icon"
            type="search"
            title="查询"
            @click.stop="serarchPostCode"
          />
        </a-input>
      </div>
      <div slot="headRight" class="arrive_add_father">
        <span class="arrive_circle_red"></span>
        <span class="arrive_label_red"> 超期天数 </span>
        <span class="arrive_circle_orange"></span>
        <span class="arrive_label_orange">临期天数</span>
        <span class="arrive_circle_green"></span>
        <span class="arrive_label_green">正常状态</span>
        <!-- <span> 临期天数 </span>
          <span> 正常状态 </span> -->
      </div>
      <!-- 其他查询条件 -->
      <div slot="more">
        <a-form layout="inline" class="accept_more_operate_moreForm">
          <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse">
            <a-collapse-panel :show-arrow="false" disabled key="1" style="font-weight: bold">
              <div slot="header" class="accept_more_operate_moreForm_collapse_head">
                <a-row :gutter="48" style="width: 100%">
                  <a-col @click.stop="() => {}" :md="8" :sm="24">
                    <a-form-item label="申请人：">
                      <a-input v-model="queryParam.f_applyname" placeholder="请输入申请人" allowClear />
                    </a-form-item>
                  </a-col>
                  <a-col @click.stop="() => {}" :md="8" :sm="24">
                    <a-form-item label="被申请人：">
                      <a-input v-model="queryParam.f_targetname" placeholder="请输入被申请人" allowClear />
                    </a-form-item>
                  </a-col>
                  <a-col @click.stop="() => {}" :md="8" :sm="24">
                    <a-form-item label="来源：">
                      <a-select
                        v-model="queryParam.f_source"
                        style="width: 220px; font-weight: normal"
                        placeholder="请选择来源"
                        allowClear
                      >
                        <a-select-option v-for="item in Tp_applysourceList" :key="item.value" :value="item.value">
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>

              <a-row :gutter="48" style="width: 100%" class="accept_more_operate_moreForm_collapse_body">
                <a-col @click.stop="() => {}" :md="12" :sm="24">
                  <a-form-item label="期满日期：">
                    <a-date-picker
                      v-model="queryParam.f_applystarttime"
                      :style="{ width: 'calc(50% - 10px)' }"
                      placeholder="开始日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="subtimeListen()"
                    />
                    ~
                    <a-date-picker
                      v-model="queryParam.f_applyendtime"
                      :style="{ width: 'calc(50% - 12px)' }"
                      placeholder="结束日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="subtimeListen()"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-collapse-panel>
          </a-collapse>
        </a-form>
      </div>
      <template slot="content">
        <div class="accept_content_table">
          <!-- 表格数据 -->
          <a-table
            :scroll="scroll"
            :columns="ucolumns"
            :data-source="listData"
            :pagination="upagination"
            :loading="loading"
            rowKey="id"
            @change="tableChange"
            size="middle"
            :bordered="ubordered"
            :rowClassName="rowClassName"
            :components="header"
            ref="table"
            :key="tableCountKey"
          >
            <span slot="serial" slot-scope="text, record, index">
              {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
            </span>

            <div
              slot="noticeSlot"
              slot-scope="text, record"
              class="overBox"
              style="width: 100%; display: flex; align-items: center; justify-content: center"
            >
              <a-popover placement="topLeft">
                <template slot="content">
                  <span>{{
                    record.warntime
                      ? `${record.warntime.substring(0, 4)}年${record.warntime
                        .substring(5, 7)
                        .replace(/\b(0+)/gi, '')}月${record.warntime.substring(8, 10).replace(/\b(0+)/gi, '')}日截止`
                      : '无截止日期'
                  }}</span>
                </template>

                <div
                  :class="{
                    breathingLampGray: !record.leftDay,
                    breathingLampRed: record.leftDay < 0,
                    breathingLampOrange: record.leftDay >= 0 && record.leftDay <= 3,
                    breathingLampGreen: record.leftDay > 3
                  }"
                ></div>
              </a-popover>
            </div>

            <div slot="leftDaySlot" slot-scope="text, record" class="beyond_hiding number_top_div" style="width: 100%">
              <div v-if="record.leftDay != null && record.leftDay != undefined">
                <span v-if="record.leftDay > 3" style="color: green">剩余{{ Math.abs(record.leftDay) }}天</span>
                <span
                  v-else-if="record.leftDay >= 0 && record.leftDay <= 3"
                  style="color: orange"
                >剩余 {{ record.leftDay }}天
                </span>
                <span v-else-if="record.leftDay < 0" style="color: red"> 逾期{{ Math.abs(record.leftDay) }}天</span>
              </div>
            </div>

            <div slot="tosendnumSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
              {{ record.tosendnum ? record.tosendnum + '件' : '0件' }}
            </div>

            <div slot="sendednumSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
              {{ record.sendednum ? record.sendednum + '件' : '0件' }}
            </div>

            <div
              slot="acceptcodeSlot"
              slot-scope="acceptcode"
              class="beyond_hiding"
              style="width: 100%; text-align: left"
            >
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ acceptcode }}</span>
                </template>
                {{ acceptcode }}
              </a-tooltip>
            </div>

            <div
              slot="targetnameSlot"
              slot-scope="targetname"
              class="beyond_hiding"
              style="width: 100%; text-align: left"
            >
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ targetname }}</span>
                </template>
                {{ targetname }}
              </a-tooltip>
            </div>

            <div
              slot="applynameSlot"
              slot-scope="applyname"
              class="beyond_hiding"
              style="width: 100%; text-align: left"
            >
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ applyname }}</span>
                </template>
                {{ applyname }}
              </a-tooltip>
            </div>

            <div slot="dealNameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ dealNameLabel(record) }}</span>
                </template>
                {{ dealNameLabel(record) }}
              </a-tooltip>
            </div>

            <div slot="warntimeSlot" slot-scope="warntime" class="beyond_hiding" style="width: 100%">
              {{ warntime | getTimeFormat('YYYY年M月D日') }}
            </div>

            <span slot="operation" slot-scope="text, record" style="display: flex; justify-content: center">
              <template>
                <div class="deal_button_div">
                  <span class="deal_button_font" @click="addHandleData(record)">处理</span>
                </div>
              </template>
            </span>
          </a-table>
        </div>

        <ArrivePostProcess ref="arrivePostRef" :postCode="postCode" />
      </template>
    </CommonHeadQueryComponent>
  </a-spin>
</template>

  <script>
  import drag from '@/components/TableDrag/drag'
  import storage from 'store'
  import moment from 'moment'
  import { APP_USER } from '@/store/mutation-types.js'
  import { queryArriveRecord } from '@/api/arrive/apl_arrive_main'
  import { Tp_sendwayList } from '@/enumeration/Tp_sendway'
  import { St_admreview } from '@/enumeration/St_admreview'
  import { St_arriveList } from '@/enumeration/St_arrive'
  import { Tp_admpr } from '@/enumeration/Tp_admpr'
  import { Tp_procmaterialList } from '@/enumeration/Tp_procmaterial'
  import { Tp_applysourceList } from '@/enumeration/Tp_applysource'
  import { LableTitle } from '@/enumeration/LableTitle'
  import ArrivePostProcess from '@/views/arrive/ArrivePostProcess.vue'

  const ucolumns = [
    {
      title: '序号',
      width: 80,
      key: 'index',
      align: 'center',
      fixed: 'left',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '案号',
      dataIndex: 'acceptcode',
      key: 'acceptcode',
      width: 250,
      align: 'center',
      scopedSlots: { customRender: 'acceptcodeSlot' }
    },
    {
      title: '提醒',
      width: 50,
      align: 'center',
      scopedSlots: { customRender: 'noticeSlot' }
    },
    {
      title: '天数',
      dataIndex: 'leftDay',
      key: 'leftDay',
      width: 100,
      align: 'center',
      scopedSlots: { customRender: 'leftDaySlot' }
    },
    {
      title: '待送达',
      dataIndex: 'tosendnum',
      key: 'tosendnum',
      width: 100,
      align: 'center',
      scopedSlots: { customRender: 'tosendnumSlot' }
    },
    {
      title: '已送达',
      dataIndex: 'sendednum',
      key: 'sendednum',
      width: 100,
      align: 'center',
      scopedSlots: { customRender: 'sendednumSlot' }
    },
    {
      title: '期满日期',
      dataIndex: 'warntime',
      key: 'warntime',
      width: 150,
      align: 'center',
      scopedSlots: { customRender: 'warntimeSlot' }
    },
    {
      title: '行政复议状态',
      dataIndex: 'status_text',
      key: 'status_text',
      width: 150,
      align: 'center'
    },
    {
      title: '申请人',
      dataIndex: 'applyname',
      key: 'applyname',
      width: 100,
      align: 'center',
      scopedSlots: { customRender: 'applynameSlot' }
    },
    {
      title: '被申请人',
      dataIndex: 'targetname',
      key: 'targetname',
      width: 250,
      align: 'center',
      scopedSlots: { customRender: 'targetnameSlot' }
    },
    {
      title: '承办人',
      width: 150,
      dataIndex: 'dealname',
      key: 'dealname',
      align: 'center',
      scopedSlots: { customRender: 'dealnameSlot' }
    },
    {
      title: '申请来源',
      dataIndex: 'source_text',
      key: 'source_text',
      width: 150,
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 150,
      fixed: 'right',
      align: 'center',
      scopedSlots: { customRender: 'operation' }
    }
  ]

  export default {
    data () {
      return {
        ucolumns: ucolumns,
        cardColumns: [],
        queryParam: {
          f_acceptcode: undefined, // 案号
          f_applyname: undefined, // 申请人
          f_targetname: undefined, // 被申请人
          f_applystarttime: '', // 期满开始时间
          f_applyendtime: '', // 期满结束时间
          f_source: undefined, // 申请来源
          pageNumber: 1,
          pageSize: 20,
          sort: '',
          order: ''
        },
        listData: [],
        upagination: {
          // 表格分页参数
          defaultPageSize: 20,
          total: 0,
          current: 1,
          pageSize: 20,
          showTotal: total => `共计 ${total} 条数据`,
          showSizeChanger: true,
          showQuickJumper: true,
          pageSizeOptions: ['10', '20', '50', '100']
        },
        loading: false,
        ubordered: true, // 表格边框是否显示
        mixins: [drag],
        currentUser: storage.get(APP_USER), // 登录人信息
        Tp_sendwayList: Tp_sendwayList, // 送达方式
        St_arriveList: St_arriveList, // 送达状态
        Tp_procmaterialList: Tp_procmaterialList, // 材料类型-过程材料
        noticeTypeList: Tp_procmaterialList,
        Tp_applysourceList: Tp_applysourceList,
        St_admreview: St_admreview,
        Tp_admpr: Tp_admpr,
        defaultTreeData: [], // 默认树结构
        LableTitle: LableTitle,
        header: undefined,
        tableCountKey: 0,
        collapseKey: [1], // 折叠面板key

        postCode: undefined, // 快递单号
        spinning: false,
        scroll: { x: 1000, y: 410 }
      }
    },
    components: {
      CommonHeadQueryComponent: () => import('@/views/accept/component/CommonHeadQueryComponent.vue'),
      ArrivePostProcess
    },
    computed: {},
    created () {
      // console.log('this.$route.query.queryParamcreated', this.$route.query.queryParam)
      let routeParam
      try {
        routeParam = JSON.parse(JSON.stringify(this.$route.query.queryParam.TempqueryParam))
        this.queryParam = { ...this.queryParam, ...this.$route.query.queryParam.TempqueryParam }
      } catch {
        console.log('路由传参非json格式')
      }
      this.headerChange()
      // 待处理人员
      this.queryList()
    },
    mounted () {},
    watch: {
      ucolumns: {
        handler (newValue, oldVal) {
          this.headerChange()
        },
        deep: true // 深度监听
      }
    },
    methods: {
      myEvent (e) {
        if (e) {
          this.scroll.y = this.scroll.y + e
        } else {
          this.scroll.y = 410
        }
      },
      addHandleData (record) {
        console.log('recordadd', record)
        const applyid = record.id
        record.TempqueryParam = this.queryParam
        this.$router.push({
          path: `/ArriveInfoAdd/${applyid}`,
          query: {
            url: '/ArriveInfo',
            queryParam: record
          }
        })
        console.log('this.queryParam', this.queryParam)
      },
      headerChange () {
        console.log('移动后', this.ucolumns)
        this.header = {
          header: {
            cell: drag.methods.initDrag(this.ucolumns)
          }
        }
      },
      setColumns (columns) {
        console.log('重置前', this.ucolumns)
        // tableCountKey自增是为了让表格控件每次销毁强制更新
        this.tableCountKey += 1
        this.ucolumns = columns
        // this.ucolumns = columns
        console.log('重置后', this.ucolumns)
      },
      filterOption (input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      onSearch (val) {
        this.queryParam.f_acceptcode = val
        this.queryParam.pageNumber = 1
        this.queryParam.pageSize = 20
        this.queryList()
      },
      // 期满日期监听判断开始结束日期是否合理
      subtimeListen () {
        if (
          this.queryParam.f_applystarttime > this.queryParam.f_applyendtime &&
          this.queryParam.f_applystarttime &&
          this.queryParam.f_applyendtime
        ) {
          this.queryParam.f_applystarttime = undefined
        }
      },
      /**
       * 重置查询条件并查询数据
       */
      reQuery () {
        this.queryParam = {
          f_acceptcode: undefined, // 案号
          f_applyname: undefined, // 申请人
          f_targetname: undefined, // 被申请人
          f_applystarttime: '', // 期满开始时间
          f_applyendtime: '', // 期满结束时间
          pageNumber: 1,
          pageSize: 20,
          sort: '',
          order: ''
        }
        this.queryList()
      },

      tableChange (upagination, filters, sorter, { currentDataSource }) {
        this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
        this.queryParam.pageNumber = upagination.current
        this.queryParam.pageSize = upagination.pageSize
        this.queryList()
      },
      // 其他tab页触发修改当前页事件
      tableChangeOther (upagination) {
        this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
        this.queryParam.pageNumber = upagination.current
        this.queryParam.pageSize = upagination.pageSize
        this.queryList()
      },

      getCpQueryParam () {
        // 时间转换
        const cpQueryParam = JSON.parse(JSON.stringify(this.queryParam))
        if (this.queryParam.f_applystarttime?.format) {
          cpQueryParam.f_applystarttime = this.queryParam.f_applystarttime.format('YYYY-MM-DD') + ' 00:00:00'
        }
        if (this.queryParam.f_applyendtime?.format) {
          cpQueryParam.f_applyendtime = this.queryParam.f_applyendtime.format('YYYY-MM-DD') + ' 23:59:59'
        }
        return cpQueryParam
      },

      queryList () {
        // 时间转换
        const cpQueryParam = this.getCpQueryParam()
        if (cpQueryParam.f_acceptcode) {
          cpQueryParam.f_acceptcode = cpQueryParam.f_acceptcode.toString().trim()
        }
        if (cpQueryParam.f_applyname) {
          cpQueryParam.f_applyname = cpQueryParam.f_applyname.toString().trim()
        }
        if (cpQueryParam.f_targetname) {
          cpQueryParam.f_targetname = cpQueryParam.f_targetname.toString().trim()
        }
        this.loading = true
        this.spinning = true
        queryArriveRecord(cpQueryParam)
          .then(res => {
            if (res.code !== 0) {
              this.$message.error('获取数据失败')
            } else {
              this.listData = res.data.records
              this.setEnumData()
              this.upagination.total = res.data.total
              this.upagination.current = res.data.current
              this.upagination.pageSize = res.data.size
              this.$emit('setTotal', res.data.total)
            }
          })
          .catch(err => {
            this.listData = []
            console.log(err, '获取数据失败')
          })
          .finally(() => {
            this.loading = false
            this.spinning = false
          })
      },
      // 设置对应的枚举值
      setEnumData () {
        if (this.listData) {
          this.listData.forEach(item => {
            // 来源
            item.source_text = this.sourceLable(item.source)
            item.status_text = this.statusLable(item)
            item.dealname = this.dealNameLabel(item)
            if (item.warntime) {
              item.leftDay = moment(item.warntime).diff(moment(new Date()), 'days')
            } else {
              item.leftDay = undefined
            }
          })
        }
      },
      /**
       * 来源途径显示转换
       */
      sourceLable (val) {
        for (const key in this.Tp_applysourceList) {
          if (this.Tp_applysourceList[key].value == val) {
            return this.Tp_applysourceList[key].name
          }
        }
        return val
      },

      // 状态转换显示
      statusLable (record) {
        const val = record.status
        for (const key in this.St_admreview) {
          if (this.St_admreview[key].value == val) {
            return this.St_admreview[key].name
          }
        }
        return val
      },

      /**
       * 案件承办人
       * @param {} record
       */
      dealNameLabel (record) {
        let dealName = record.hearfirstname
        if (dealName && record.hearsecondname) {
          dealName = dealName + ',' + record.hearsecondname
        }
        if (!dealName) {
          let dealName = record.acceptfirstname
          if (dealName && record.acceptsecondname) {
            dealName = dealName + ',' + record.acceptsecondname
          }
        }
        return dealName
      },

      rowClassName (record, index) {
        return index % 2 === 0 ? 'oddRow' : 'evenRow'
      },

      // 快递单号查询
      serarchPostCode () {
        if (this.postCode) {
          this.postCode = this.postCode.toString().trim()
          this.spinning = true
          this.$refs.arrivePostRef.queryPostInfo(() => {
            this.spinning = false
          })
        } else {
          this.$message.warn('请输入邮递单号再查询')
        }
      }
    }
  }
  </script>

  <style lang="less" scoped>
  @import '~@/components/TableDrag/style.less';
  </style>
  <style lang="scss" scoped>
  @import '~@/assets/css/apply/breathingLamp.scss';
  .accept_content {
    &_table {
      &_font_red {
        color: #ca0000;
        font-size: 16px;
        font-family: 'PingFang-SC-Heavy';
        font-weight: 400;
      }

      ::v-deep .ant-table-row-cell-break-word {
        font-size: 16px;
        font-family: 'PingFang-SC-Heavy';
        font-weight: 400;
        color: #2c2c2c;
      }

      ::v-deep .ant-table-thead > tr > th {
        height: 50px;
      }

      ::v-deep .ant-table-row-cell-break-word {
        font-size: 16px;
        font-family: 'PingFang-SC-Heavy';
        font-weight: 600;
        color: #2c2c2c;
      }

      // ::v-deep .ant-pagination-total-text {
      //   font-size: 16px;
      //   font-family: 'PingFang-SC-Heavy';
      //   font-weight: 400;
      //   color: #8e97b9;
      // }

      ::v-deep .ant-table-body,
      .ant-table-header {
        word-break: break-all;
        &::-webkit-scrollbar {
          width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
          // height: 10px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 6px;
          // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #a2c6e1;
        }
        &::-webkit-scrollbar-track {
          // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          border-radius: 5px;
          background: transparent;
        }
      }
    }
  }

  .arrive_add_father {
    margin: 0px 20px 0px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .arrive_circle_red {
    background: #ca0000;
    border-radius: 50%;
    width: 10px;
    height: 10px;
  }
  .arrive_label_red {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #ca0000;
    margin-left: 10px;
    margin-right: 30px;
  }

  .arrive_circle_orange {
    background: #ffa200;
    border-radius: 50%;
    width: 10px;
    height: 10px;
  }
  .arrive_label_orange {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #ffa200;
    margin-left: 10px;
    margin-right: 30px;
  }
  .arrive_circle_green {
    background: #00ae08;
    border-radius: 50%;
    width: 10px;
    height: 10px;
  }
  .arrive_label_green {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #00ae08;
    margin-left: 10px;
    margin-right: 30px;
  }

  .arrive_add_span {
    font-size: 20px;
    font-family: 'PingFang-SC-Heavy';
    font-weight: 800;
    text-decoration: underline;
    color: #0072c6;
    margin-left: 10px;
  }

  .arrive_add_icon {
    font-size: 20px;
    color: #0072c6;
  }

  .deal_button_div {
    width: 70px;
    height: 28px;
    //background: rgba(0,114,198,0.1);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .deal_button_font {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #0072c6;
    line-height: 7px;
  }

  .number_top_div {
    display: flex;
    align-content: center;
    justify-content: center;
  }

  /*数字加圈*/
  .number_top_circle_red {
    display: table-cell;
    border-radius: 18px;
    background-color: #ca0000;
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
  }

  .number_top_circle_orange {
    display: table-cell;
    border-radius: 18px;
    background-color: #ffa200;
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
  }

  .number_top_circle_green {
    display: table-cell;
    border-radius: 18px;
    background-color: #00ae08;
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
  }

  .number_top_no_circle {
    display: table-cell;
    border-radius: 18px;
    background-color: #cccccc;
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    color: #333333;
  }
  /*数字加圈*/
  </style>
